<template>
  <div class="warp">
    <div class="warp-l">
      <button class="flag-color">个人登录</button>
    </div>
    <div class="warp-r">
      <div>个人登录</div>
      <div class="warp-r-b">
        <span>用户名</span>
        <span>
          <input type="text" placeholder="邮箱/电话号码" v-model="user" />
        </span>
      </div>
      <div class="warp-r-b">
        <span>密码</span>
        <span>
          <input type="password" v-model="psw" />
        </span>
      </div>
      <div>
        <button class="flag-color" @click="onLogin">登录</button>
      </div>
      <div class="warp-r-b purple">
        <span>忘记密码</span>
        <span @click="toPage()">注册</span>
      </div>
    </div>
  </div>
</template>
<script>
import store from "../vuex/store.js";
import API from "../api/api.js";
export default {
  data() {
    return {
      user: null,
      psw: null,
      userName: null,
      userInfo: null
    };
  },
  store,
  methods: {
    toPage() {
      this.$router.push({
        name: "register"
      });
    },
    onLogin() {
      API.personal_login(this.user, this.psw).then(res => {
        if (res.data.code == 1) {
         this.$store.commit('_setItem',{id:res.data.id,user:this.user,token:res.data.token})
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.$router.push({ name: "personalRecord" });
        }
        if (res.data.code == 0) {
          this.$message(res.data.msg);
          return;
        }
      });
      // var reE = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      // var reI = /^1[34578]\d{9}$/;
      // if (!((reE.test(this.userName)) || (reI.test(this.userName)))) {
      //   this.$toast.fail('是邮箱或者电话?');
      //   return
      // }
      // this.$http.get('/api/getPersonal', {
      //   params: {
      //     name: this.userName
      //   }
      // }).then((res) => {
      //   var userInfo = res.data[0]
      //   if (!userInfo) {
      //     this.$toast.fail('这人存在吗？');
      //   } else {
      //     if (userInfo.psw == this.psw) {
      //       this.$toast.success('OH，YES！');
      //       // this.$store.userInfo = userInfo
      //       this.$store.commit('$_setStorage',userInfo.name)
      //       window.localStorage.setItem('userInfo', JSON.stringify(userInfo.name));
      //       this.$router.push({
      //         path: '/personalRecord',
      //       })
      //     } else {
      //       this.$toast.fail('密码失误！');
      //     }
      //   }
      // })
    },
    companyLogin() {
      var reE = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      var reI = /^1[34578]\d{9}$/;
      if (!reE.test(this.userName)) {
        this.$toast.fail("是邮箱?");
        return;
      }
      this.$http
        .get("/api/getCompany", {
          params: {
            name: this.userName
          }
        })
        .then(res => {
          var userInfo = res.data[0];
          if (!userInfo) {
            this.$toast.fail("这人存在吗？");
          } else {
            if (userInfo.psw == this.psw) {
              this.$toast.success("OH，YES！");
              // this.$store.userInfo = userInfo
              this.$store.commit("$_setStorage", userInfo.name);
              this.$router.push({
                path: "/personalRecord"
              });
            } else {
              this.$toast.fail("密码失误！");
            }
          }
        });
    }
  }
};
</script>
<style scoped>
.purple {
  color: #800080;
}
.warp {
  width: 100%;
  display: flex;
}
.warp-l {
  border-right: 0.3rem solid #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 0.2rem 1rem;
}
.warp-l button {
  margin-top: 1rem;
}
.flag-color {
  background: #800080;
  color: #fff;
}
.warp-r {
  text-align: center;
  padding: 5rem 30%;
}
.warp-r div {
  margin-top: 0.2rem;
}
.warp-r-b {
  display: flex;
  justify-content: space-between;
}
</style>
